<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue[列表查询-父子组件数据传递实例]</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="app">
			<my-parnet></my-parnet>
		</div>
		<!-- 父组件界面 -->
		<template id="parnet">
			<div>
				<h3>手机信息搜索</h3> 手机品牌：
				<input type="text" v-model="barnd" />
				<my-child v-bind:name="barnd"></my-child>
			</div>
		</template>
		<!-- 子组件界面 -->
		<template id="child">
			<div>
				<li>手机品牌： {{myPel.barnd}}</li>
				<li>手机型号： {{myPel.mytype}}</li>
				<li>市场价格： {{myPel.price}}</li>
			</div>
		</template>

		<script>
			//注册父组件
			Vue.component('my-parnet', {
				template: "#parnet",
				data() {
					return {
						barnd: ""
					}
				}
			})

			//注册子组件及查询功能
			Vue.component('my-child', {
				template: "#child",
				data() {
					return {
						content: [{
							barnd: '华为',
							mytype: 'Mate20',
							price: 2334
						}, {
							barnd: '苹果',
							mytype: 'IPhone',
							price: 4566
						}, {
							barnd: '三星',
							mytype: 'Galay',
							price: 1244
						}, {
							barnd: '小米',
							mytype: 'Mix 20',
							price: 3645
						}, {
							barnd: '摩托咯啦',
							mytype: 'wer',
							price: 1256
						}],
						myPel: {
							barnd: '',
							mytype: '',
							price: 0
						}
					}
				},
				props: ['name'],
				watch: {
					name() {
						if(this.$props.name) {
							var found = false
							this.content.forEach((value, index) => {
								if(value.barnd == this.$props.name) {
									found = value
								}
							});
							this.myPel = found ? found : {
								barnd: '',
								mytype: '',
								price: 0
							}
						} else {
							return
						}
					}
				}
			})
			var vm = new Vue({
				el: '#app',
			})
		</script>
	</body>

</html>